<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div id="app"></div>
	<script src="./index.js"></script>
	<script>
		// 创建响应式状态
		const state = reactive({
			count: 0
		})

		const count1 = computed(() => state.count * 2)
		const count2 = computed(() => state.count * 3)
		// 定义组件的渲染函数
		const render = () => {
			console.log('页面更新');
			//在实际的Vue中，使用的是虚拟DOM和diff算法来更新视图
			// 这里我们直接操作DOM，简化示例
			const app = document.getElementById('app');
			app.innerHTML = `
			<h1>count: ${count1.value}</h1>
			<h1>count: ${count2.value}</h1>
			<button onclick="increment()">Increment</button>
			`
		}
		// 每个组件都有 创建渲染effect
		effect(render);

		const increment = () => {
			state.count++;
		};
	</script>
</body>

</html>